"use client";

import { setCookie } from "@/libs/cookie";
import { UserOutlined } from "@ant-design/icons";
import { useApolloClient } from "@apollo/client";
import { Dropdown, Avatar, Button, Space } from "antd";
import { useRouter } from "next/navigation";
import { PropsWithChildren, useCallback, useMemo } from "react";

const UserClientLayout = ({
  children,
  user,
}: PropsWithChildren<{ user: any }>) => {
  const router = useRouter();
  const client = useApolloClient();
  const onLogout = useCallback(() => {
    setCookie("token", "");
    client.clearStore();
    router.push("/");
  }, []);
  const items = useMemo(() => {
    return [
      {
        label: (
          <Button onClick={onLogout} type="text">
            退出登录
          </Button>
        ),
      },
    ].map((item, key) => ({ ...item, key }));
  }, []);
  return (
    <div className="flex flex-col min-h-screen bg-gray-100">
      <header className="bg-white shadow-sm">
        <div className="max-w-7xl mx-auto px-4 py-2 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center">
            <h1 className="text-lg font-bold text-gray-900">评价系统</h1>
            <div className="relative">
              <Dropdown menu={{ items }} trigger={["hover"]}>
                <Space>
                  <Avatar
                    size="large"
                    icon={<UserOutlined />}
                    className="mr-4 cursor-pointer"
                  />
                  {user?.profile?.name}
                </Space>
              </Dropdown>
            </div>
          </div>
        </div>
      </header>
      {children}
    </div>
  );
};
export default UserClientLayout;
